<template>
	<view>
		<view class="top">
			<view v-for="(item,index) in time">
				<view @click="getday(item,index)">
					<view class="day_class" :class="{day_active:checked_top==index}">
						{{item.date}}
					</view>
					<view class="months_class" :class="{months_active:checked_top==index}">
						{{item.week}}
					</view>
					<view class="xian" :class="{xian_active:checked_top==index}">
					</view>
				</view>
			</view>
		</view>
		<view class="center">
			<view v-if="day_index == 0" class="yueman" v-for="(item,index) in now_time_List">
				<view v-if="item.start_time <= now_time" class="font_class">
					<view>
						{{item.start_time}}
					</view>
					<view class="">
						已过
					</view>
				</view>
				<view v-else class="time_box" @click="getTime(item.id,index,item.start_time)"
					:class="{font1_class:checked == index}">
					<view>
						{{item.start_time}}
					</view>
					<view class="">
						可预约
					</view>
				</view>
			</view>
			<view v-else class="yueman" v-for="(item,index) in now_time_List">
				<view class="time_box" @click="getTime(item.id,index,item.start_time)"
					:class="{font1_class:checked == index}">
					<view>
						{{item.start_time}}
					</view>
					<view class="">
						可预约
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="button_class" @click="srueFn">
				确认
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				now_time: '',
				now_time_List: [],
				checked: -1,
				checked_top: 0,
				time: [],
				checked_time: {
					day: '',
					detail: ''
				},
				day_index: 0,
				check_id: 0,
				check_date: '',
				check_time: '',
				now_year: ''
			};
		},
		onLoad() {
			this.chandleAppointDay()
			let data = new Date();
			let Y = data.getFullYear()
			let M = data.getMonth() + 1 < 10 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
			let D = data.getDate() < 10 ? "0" + data.getDate() : data.getDate();
			let h = data.getHours();
			let mm = data.getMinutes();
			let s = data.getSeconds();
			h = h >= 10 ? h : "0" + h;
			mm = mm >= 10 ? mm : "0" + mm;
			this.now_time = h + ':' + mm
			this.now_year = Y + '-' + M + '-' + D
			this.getTimeList()
		},
		methods: {
			getTime(id, index, time) {
				this.checked = index
				this.check_id = id
				this.check_time = time
			},
			getTimeList() {
				let that = this
				that._get(
					'user.order/getlist', {},
					function(res) {
						console.log(res, 'res');
						that.now_time_List = res.data
						console.log(that.now_time_List, 'this.now_time_List');
					}, err => {

					}
				);
			},
			getday(time, index) {
				console.log(time);
				this.checked_top = index
				this.checked_time.day = time;
				this.day_index = index
				this.check_date = time.year + '-' + time.date
				this.checked = -1
			},
			srueFn() {
				let that = this
				console.log('self.now_year', that.now_year);
				console.log('that.check_time', that.check_time);
				if (that.check_time != '') {
					if (that.check_time == '17:30' && that.check_date != that.now_year) {
						that.check_time = '17:00'
						console.log('that.check_time', that.check_time);
						uni.navigateBack({
							delta: 1, // 返回上一页
							success(res) {
								// 向上一页传递参数
								uni.$emit('time', {
									check_id: that.check_id,
									check_date: that.check_date,
									check_time: that.check_time
								});
							}
						});
					} else {
						uni.navigateBack({
							delta: 1, // 返回上一页
							success(res) {
								// 向上一页传递参数
								uni.$emit('time', {
									check_id: that.check_id,
									check_date: that.check_date,
									check_time: that.check_time
								});
							}
						});
					}
				} else {
					uni.showToast({
						title: '请选择预约时间',
						icon: 'none'
					})
				}


			},
			chandleAppointDay() {
				const timeArr = []
				// 现在时间戳
				const newTime = new Date().getTime()
				for (let i = 0; i <= 3; i++) {
					// 获取天数时间戳
					const millisecond = newTime + i * 24 * 60 * 60 * 1000
					// 年
					const year = new Date(millisecond).getFullYear()
					// 月
					const month = new Date(millisecond).getMonth() + 1
					// 星期
					const week = new Date(millisecond).getDay()
					// 日
					const day = new Date(millisecond).getDate()
					// 未来天数的数组
					timeArr.push({
						year: year,
						week: this.handleWeek(week, i),
						date: (month <= 9 ? '0' + month : month) + '-' + (day <= 9 ? '0' + day : day)
					})
				}
				this.time = timeArr
				console.log('timeArr', timeArr);
				this.checked_time.day = this.time[0]
				// this.check_date = this.time[0].date
				this.check_date = this.time[0].year + '-' + this.time[0].date
				// this.check_date = this.time[0].date
				console.log('this.time', this.time);
			},
			handleWeek(week, i) {
				if (i === 0) return '今天'
				else if (i === 1) return '明天'
				else if (week === 0) return '周日'
				else if (week === 1) return '周一'
				else if (week === 2) return '周二'
				else if (week === 3) return '周三'
				else if (week === 4) return '周四'
				else if (week === 5) return '周五'
				else if (week === 6) return '周六'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		text-align: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.day_class {
		font-size: 29rpx;
	}

	.months_class {
		font-size: 26rpx;
		color: #ccc;
	}

	.months_active {
		font-size: 26rpx;
		color: #2568BC;
	}

	.center {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.yueman {
		width: 32%;
	}

	.time_box {
		border: 1rpx solid #ccc;
		width: 100%;
		text-align: center;
		margin-bottom: 15rpx;
		padding: 15rpx 0;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.font1_class {
		color: #2568BC;
		border: 1rpx solid #2568BC;
		width: 100%;
		text-align: center;
		margin-bottom: 15rpx;
		padding: 15rpx 0;
		border-radius: 10rpx;
		background-color: #fff;

	}

	.font_class {
		color: #ccc;
		border: 1rpx solid #ccc;
		width: 100%;
		text-align: center;
		margin-bottom: 15rpx;
		padding: 15rpx 0;
		border-radius: 10rpx;
		background-color: #faf8fb;
	}

	.button_class {
		background-color: #2568BC;
		border-radius: 50rpx;
		padding: 20rpx 0rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
	}

	.footer {
		padding: 40rpx;
	}

	.day_active {
		font-size: 29rpx;
		color: #2568BC !important;
	}

	.xian_active {
		width: 50rpx;
		height: 5rpx;
		background-color: #2568BC !important;
		text-align: center;
		position: absolute;
		bottom: 0;
		margin-left: 3%;
	}

	.xian {
		width: 50rpx;
		height: 5rpx;
		background-color: #fff;
		text-align: center;
		position: absolute;
		bottom: 0;
		margin-left: 3%;
	}
</style>